﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jquery-1.10.2.js"></script>
    <style type="text/css">
        select {
            width: 200px;
        }
    </style>
</head>
<body>
    <select id="sel1"></select>
    <select id="sel2"></select>
    <select id="sel3"></select>
</body>
</html>
<script>
    var processSelect = function (sel1, sel2, sel3) {
        this.el1 = sel1;
        this.el2 = sel2;
        this.el3 = sel3;

        this.load = function (p1, p2, p3) {
            this.render(this.el1, p1.url, p1.data);
            this.render(this.el2, p2.url, p2.data);
            this.render(this.el3, p3.url, p3.data);
            var that = this;
            (function () {
                var count = 0;
                var l1 = $(that.el1).find("option").length;
                var l2 = $(that.el2).find("option").length;
                var l3 = $(that.el3).find("option").length;
                if (l1 != 0) {
                    count++;
                }
                if (l2 != 0) {
                    count++;
                }
                if (l3 != 0) {
                    count++;
                }

                if (count == 3) {
                    $(that.el1).val(p1.val);
                    $(that.el2).val(p2.val);
                    $(that.el3).val(p3.val);
                    return;
                }

                var arg = arguments;

                window.requestAnimationFrame(function () { arg.callee.apply(that, arg) });
            })();
        }
        this.render = function (el, url, _data) {
            //clear all
            $(el).find("option").each(function () {
                $(this).remove();
            })
            $.ajax({
                type: "GET",
                url: url,
                data: _data,
                dataType: "text",
                success: function (data) {
                    data = eval("(" + data + ")");
                    var html = "";
                    for (var i = 0; i < data.length; i++) {
                        html += "<option value='" + data[i].id + "'>" + data[i].text + "</option>";
                    }
                    $(el).append($(html));
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("HTTP请求错误代码:" + jqXHR.status + ",描述:" + jqXHR.statusText);
                }
            });
        }
    }

    var s = new processSelect($("#sel1"), $("#sel2"), $("#sel3"));
    s.load({ url: "SelectAjax.aspx", data: { tag: "sel1" }, val: "1" }, { url: "SelectAjax.aspx", data: { tag: "sel2" }, val: "22" }, { url: "SelectAjax.aspx", data: { tag: "sel3" }, val: "333" });

    $("#sel1").change(function () {
        s.render($("#sel2"), "SelectAjax.aspx", { tag: "fromSel1" });
    })
    $("#sel2").change(function () {
        s.render($("#sel3"), "SelectAjax.aspx", { tag: "fromSel2" });
    })
</script>
